<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务列表 - 社交服务平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* 基础样式 */
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f8f9fa;
            color: #333;
        }
        
        .container {
            max-width: 1400px;
        }
        
        /* 导航栏 */
        .navbar {
            background-color: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .logo {
            font-weight: 700;
            font-size: 1.5rem;
            color: #2563eb;
            text-decoration: none;
        }
        
        /* 筛选区域 */
        .filters-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .filter-section {
            margin-bottom: 1.5rem;
        }
        
        .filter-section:last-child {
            margin-bottom: 0;
        }
        
        .filter-title {
            font-weight: 600;
            margin-bottom: 1rem;
            color: #1e293b;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        /* 服务卡片 */
        .service-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            overflow: hidden;
            transition: transform 0.2s, box-shadow 0.2s;
            margin-bottom: 1.5rem;
        }
        
        .service-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.12);
        }
        
        .service-image {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }
        
        .service-content {
            padding: 1.25rem;
        }
        
        .service-author {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 0.75rem;
        }
        
        .author-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-name {
            font-weight: 500;
            font-size: 0.9rem;
            color: #475569;
        }
        
        .service-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: #1e293b;
            font-size: 1.1rem;
        }
        
        .service-description {
            color: #64748b;
            font-size: 0.9rem;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .service-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
        }
        
        .service-stats {
            display: flex;
            gap: 12px;
            color: #64748b;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .service-price {
            font-weight: 600;
            color: #2563eb;
        }
        
        .service-actions {
            display: flex;
            gap: 8px;
            margin-top: 1rem;
        }
        
        .action-btn {
            background: none;
            border: none;
            color: #64748b;
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 0.85rem;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.2s;
        }
        
        .action-btn:hover {
            background-color: #f1f5f9;
            color: #2563eb;
        }
        
        /* 筛选组件样式 */
        .category-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .category-pill {
            background-color: #f1f5f9;
            border: 1px solid #e2e8f0;
            border-radius: 20px;
            padding: 4px 12px;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .category-pill:hover {
            background-color: #e2e8f0;
        }
        
        .category-pill.active {
            background-color: #2563eb;
            color: white;
            border-color: #2563eb;
        }
        
        .price-slider-container {
            padding: 1rem 0;
        }
        
        .price-display {
            display: flex;
            justify-content: space-between;
            font-weight: 500;
            margin-bottom: 1rem;
        }
        
        .rating-stars {
            display: flex;
            gap: 4px;
        }
        
        .rating-star {
            color: #cbd5e1;
            cursor: pointer;
            transition: color 0.2s;
        }
        
        .rating-star:hover,
        .rating-star.active {
            color: #f59e0b;
        }
        
        /* 排序和结果计数 */
        .results-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .results-count {
            color: #64748b;
            font-size: 0.9rem;
        }
        
        .sort-select {
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            padding: 6px 12px;
            background-color: white;
            font-size: 0.9rem;
        }
        
        /* 移动端响应式调整 */
        @media (max-width: 768px) {
            .filters-container {
                padding: 1rem;
            }
            
            .results-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }
            
            .service-image {
                height: 140px;
            }
        }
        
        /* 加载更多按钮 */
        .load-more {
            display: block;
            margin: 2rem auto;
            padding: 8px 24px;
            background-color: white;
            border: 1px solid #2563eb;
            color: #2563eb;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .load-more:hover {
            background-color: #2563eb;
            color: white;
        }
        

    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg py-3">
        <div class="container">
            <a href="#" class="logo">ServiceHub</a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
                <i class="fas fa-bars"></i>
            </button>
            
            <div class="collapse navbar-collapse justify-content-center" id="navbarContent">
                <div class="d-flex align-items-center w-100 max-w-md">
                    <input type="text" class="form-control me-2" placeholder="搜索服务..." id="globalSearch">
                    <button class="btn btn-primary" id="searchBtn">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>
            
            <div class="d-flex gap-3 ms-3">
                <a href="#" class="nav-link text-dark">
                    <i class="fas fa-home"></i>
                </a>
                <a href="#" class="nav-link text-dark">
                    <i class="fas fa-bell"></i>
                </a>
                <a href="#" class="nav-link text-dark">
                    <i class="fas fa-user-circle fa-lg"></i>
                </a>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="container py-5">
        <h1 class="mb-4">服务列表</h1>
        
        <div class="row">
            <!-- 筛选侧边栏 -->
            <div class="col-lg-3 col-md-4 mb-4">
                <div class="filters-container sticky-top" style="top: 20px;">
                    <div class="filter-section">
                        <h3 class="filter-title">
                            <i class="fas fa-filter"></i> 筛选条件
                        </h3>
                        <button class="btn btn-sm btn-outline-secondary mb-3" id="resetFilters">
                            重置所有筛选
                        </button>
                    </div>
                    
                    <!-- 分类筛选 -->
                    <div class="filter-section">
                        <h4 class="filter-title">
                            <i class="fas fa-th-large"></i> 服务分类
                        </h4>
                        <div class="category-pills" id="categoryFilters">
                            <div class="category-pill active" data-category="all">全部</div>
                            <div class="category-pill" data-category="design">设计创意</div>
                            <div class="category-pill" data-category="development">技术开发</div>
                            <div class="category-pill" data-category="education">教育培训</div>
                            <div class="category-pill" data-category="lifestyle">生活服务</div>
                            <div class="category-pill" data-category="marketing">营销推广</div>
                            <div class="category-pill" data-category="consulting">咨询顾问</div>
                        </div>
                    </div>
                    
                    <!-- 价格范围筛选 -->
                    <div class="filter-section">
                        <h4 class="filter-title">
                            <i class="fas fa-money-bill-wave"></i> 价格范围
                        </h4>
                        <div class="price-display">
                            <span id="priceMinDisplay">¥0</span>
                            <span id="priceMaxDisplay">¥5000+</span>
                        </div>
                        <div class="price-slider-container">
                            <input type="range" class="form-range" id="priceRange" min="0" max="5000" value="5000">
                        </div>
                    </div>
                    
                    <!-- 评分筛选 -->
                    <div class="filter-section">
                        <h4 class="filter-title">
                            <i class="fas fa-star"></i> 最低评分
                        </h4>
                        <div class="rating-stars" id="ratingFilters">
                            <span class="rating-star active" data-rating="0">
                                <i class="fas fa-star"></i>
                            </span>
                            <span class="rating-star active" data-rating="1">
                                <i class="fas fa-star"></i>
                            </span>
                            <span class="rating-star active" data-rating="2">
                                <i class="fas fa-star"></i>
                            </span>
                            <span class="rating-star active" data-rating="3">
                                <i class="fas fa-star"></i>
                            </span>
                            <span class="rating-star active" data-rating="4">
                                <i class="fas fa-star"></i>
                            </span>
                        </div>
                        <div class="form-text">点击星星设置最低评分</div>
                    </div>
                    
                    <!-- 交付时间筛选 -->
                    <div class="filter-section">
                        <h4 class="filter-title">
                            <i class="fas fa-clock"></i> 交付时间
                        </h4>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="deliveryAny" checked>
                            <label class="form-check-label" for="deliveryAny">
                                不限
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="delivery24h">
                            <label class="form-check-label" for="delivery24h">
                                24小时内
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="delivery3days">
                            <label class="form-check-label" for="delivery3days">
                                3天内
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="delivery7days">
                            <label class="form-check-label" for="delivery7days">
                                7天内
                            </label>
                        </div>
                    </div>
                    
                    <!-- 服务特性筛选 -->
                    <div class="filter-section">
                        <h4 class="filter-title">
                            <i class="fas fa-check-circle"></i> 服务特性
                        </h4>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="featurePremium">
                            <label class="form-check-label" for="featurePremium">
                                优质服务
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="featureFastResponse">
                            <label class="form-check-label" for="featureFastResponse">
                                快速响应
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="featureCustom">
                            <label class="form-check-label" for="featureCustom">
                                可定制化
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 服务列表 -->
            <div class="col-lg-9 col-md-8">
                <!-- 结果头部：计数和排序 -->
                <div class="results-header">
                    <div class="results-count" id="resultsCount">显示 1-12 条，共 48 条服务</div>
                    <div>
                        <select class="sort-select" id="sortSelect">
                            <option value="recommended">推荐排序</option>
                            <option value="newest">最新发布</option>
                            <option value="priceLow">价格从低到高</option>
                            <option value="priceHigh">价格从高到低</option>
                            <option value="rating">评分最高</option>
                            <option value="popular">最受欢迎</option>
                        </select>
                    </div>
                </div>
                
                <!-- 服务网格 -->
                <div class="row" id="servicesGrid">
                    <!-- 服务卡片1 -->
                    <div class="col-lg-4 col-md-6 service-card" 
                         data-category="design" 
                         data-price="399" 
                         data-rating="4.8" 
                         data-delivery="3" 
                         data-features="premium,fastResponse">
                        <img src="https://picsum.photos/600/400?random=1" alt="Logo设计服务" class="service-image">
                        <div class="service-content">
                            <div class="service-author">
                                <img src="https://picsum.photos/100/100?random=101" alt="李设计师" class="author-avatar">
                                <span class="author-name">李设计师</span>
                            </div>
                            <h3 class="service-title">专业Logo设计 - 打造品牌形象</h3>
                            <p class="service-description">提供原创Logo设计，根据品牌定位打造独特且具有辨识度的品牌标识</p>
                            <div class="service-meta">
                                <div class="service-stats">
                                    <div class="stat-item">
                                        <i class="fas fa-eye"></i>
                                        <span>1.2k</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-comment"></i>
                                        <span>86</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-star"></i>
                                        <span>4.8</span>
                                    </div>
                                </div>
                                <div class="service-price">¥399</div>
                            </div>
                            <div class="service-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>收藏</span>
                                </button>
                                <button class="action-btn message-btn">
                                    <i class="far fa-comment"></i>
                                    <span>咨询</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 服务卡片2 -->
                    <div class="col-lg-4 col-md-6 service-card" 
                         data-category="development" 
                         data-price="1500" 
                         data-rating="4.6" 
                         data-delivery="7" 
                         data-features="custom">
                        <img src="https://picsum.photos/600/400?random=2" alt="网站开发服务" class="service-image">
                        <div class="service-content">
                            <div class="service-author">
                                <img src="https://picsum.photos/100/100?random=102" alt="王开发" class="author-avatar">
                                <span class="author-name">王开发</span>
                            </div>
                            <h3 class="service-title">响应式网站开发 - 企业官网建设</h3>
                            <p class="service-description">定制企业官网，响应式设计适配各种设备，包含后台管理系统</p>
                            <div class="service-meta">
                                <div class="service-stats">
                                    <div class="stat-item">
                                        <i class="fas fa-eye"></i>
                                        <span>2.5k</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-comment"></i>
                                        <span>156</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-star"></i>
                                        <span>4.6</span>
                                    </div>
                                </div>
                                <div class="service-price">¥1500</div>
                            </div>
                            <div class="service-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>收藏</span>
                                </button>
                                <button class="action-btn message-btn">
                                    <i class="far fa-comment"></i>
                                    <span>咨询</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 服务卡片3 -->
                    <div class="col-lg-4 col-md-6 service-card" 
                         data-category="education" 
                         data-price="299" 
                         data-rating="4.9" 
                         data-delivery="1" 
                         data-features="fastResponse">
                        <img src="https://picsum.photos/600/400?random=3" alt="英语教学服务" class="service-image">
                        <div class="service-content">
                            <div class="service-author">
                                <img src="https://picsum.photos/100/100?random=103" alt="张老师" class="author-avatar">
                                <span class="author-name">张老师</span>
                            </div>
                            <h3 class="service-title">英语口语一对一 - 外教教学</h3>
                            <p class="service-description">母语外教一对一教学，提升口语流利度和发音准确性</p>
                            <div class="service-meta">
                                <div class="service-stats">
                                    <div class="stat-item">
                                        <i class="fas fa-eye"></i>
                                        <span>3.1k</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-comment"></i>
                                        <span>215</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-star"></i>
                                        <span>4.9</span>
                                    </div>
                                </div>
                                <div class="service-price">¥299</div>
                            </div>
                            <div class="service-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>收藏</span>
                                </button>
                                <button class="action-btn message-btn">
                                    <i class="far fa-comment"></i>
                                    <span>咨询</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 服务卡片4 -->
                    <div class="col-lg-4 col-md-6 service-card" 
                         data-category="lifestyle" 
                         data-price="599" 
                         data-rating="4.5" 
                         data-delivery="3" 
                         data-features="custom">
                        <img src="https://picsum.photos/600/400?random=4" alt="摄影服务" class="service-image">
                        <div class="service-content">
                            <div class="service-author">
                                <img src="https://picsum.photos/100/100?random=104" alt="刘摄影" class="author-avatar">
                                <span class="author-name">刘摄影</span>
                            </div>
                            <h3 class="service-title">产品摄影 - 商业广告拍摄</h3>
                            <p class="service-description">专业产品摄影，提供高质量图片，适合电商平台和宣传材料</p>
                            <div class="service-meta">
                                <div class="service-stats">
                                    <div class="stat-item">
                                        <i class="fas fa-eye"></i>
                                        <span>987</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-comment"></i>
                                        <span>64</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-star"></i>
                                        <span>4.5</span>
                                    </div>
                                </div>
                                <div class="service-price">¥599</div>
                            </div>
                            <div class="service-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>收藏</span>
                                </button>
                                <button class="action-btn message-btn">
                                    <i class="far fa-comment"></i>
                                    <span>咨询</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 服务卡片5 -->
                    <div class="col-lg-4 col-md-6 service-card" 
                         data-category="marketing" 
                         data-price="899" 
                         data-rating="4.7" 
                         data-delivery="7" 
                         data-features="premium,custom">
                        <img src="https://picsum.photos/600/400?random=5" alt="营销服务" class="service-image">
                        <div class="service-content">
                            <div class="service-author">
                                <img src="https://picsum.photos/100/100?random=105" alt="陈营销" class="author-avatar">
                                <span class="author-name">陈营销</span>
                            </div>
                            <h3 class="service-title">社交媒体营销 - 品牌推广</h3>
                            <p class="service-description">制定社交媒体营销策略，提升品牌知名度和用户参与度</p>
                            <div class="service-meta">
                                <div class="service-stats">
                                    <div class="stat-item">
                                        <i class="fas fa-eye"></i>
                                        <span>1.8k</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-comment"></i>
                                        <span>103</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-star"></i>
                                        <span>4.7</span>
                                    </div>
                                </div>
                                <div class="service-price">¥899</div>
                            </div>
                            <div class="service-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>收藏</span>
                                </button>
                                <button class="action-btn message-btn">
                                    <i class="far fa-comment"></i>
                                    <span>咨询</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 服务卡片6 -->
                    <div class="col-lg-4 col-md-6 service-card" 
                         data-category="consulting" 
                         data-price="1200" 
                         data-rating="4.4" 
                         data-delivery="3" 
                         data-features="premium,fastResponse">
                        <img src="https://picsum.photos/600/400?random=6" alt="咨询服务" class="service-image">
                        <div class="service-content">
                            <div class="service-author">
                                <img src="https://picsum.photos/100/100?random=106" alt="赵顾问" class="author-avatar">
                                <span class="author-name">赵顾问</span>
                            </div>
                            <h3 class="service-title">创业咨询 - 商业计划指导</h3>
                            <p class="service-description">提供创业指导和商业计划制定，帮助初创企业稳健发展</p>
                            <div class="service-meta">
                                <div class="service-stats">
                                    <div class="stat-item">
                                        <i class="fas fa-eye"></i>
                                        <span>756</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-comment"></i>
                                        <span>42</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-star"></i>
                                        <span>4.4</span>
                                    </div>
                                </div>
                                <div class="service-price">¥1200</div>
                            </div>
                            <div class="service-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>收藏</span>
                                </button>
                                <button class="action-btn message-btn">
                                    <i class="far fa-comment"></i>
                                    <span>咨询</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 加载更多按钮 -->
                <button class="load-more" id="loadMoreBtn">
                    加载更多服务
                    <i class="fas fa-chevron-down ms-1"></i>
                </button>
            </div>
        </div>
    </div>
    
    
    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 筛选和搜索功能实现
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const categoryPills = document.querySelectorAll('.category-pill');
            const priceRange = document.getElementById('priceRange');
            const priceMaxDisplay = document.getElementById('priceMaxDisplay');
            const ratingStars = document.querySelectorAll('.rating-star');
            const deliveryCheckboxes = document.querySelectorAll('input[id^="delivery"]');
            const featureCheckboxes = document.querySelectorAll('input[id^="feature"]');
            const resetFiltersBtn = document.getElementById('resetFilters');
            const sortSelect = document.getElementById('sortSelect');
            const searchBtn = document.getElementById('searchBtn');
            const globalSearch = document.getElementById('globalSearch');
            const servicesGrid = document.getElementById('servicesGrid');
            const serviceCards = document.querySelectorAll('.service-card');
            const resultsCount = document.getElementById('resultsCount');
            const loadMoreBtn = document.getElementById('loadMoreBtn');
            const likeButtons = document.querySelectorAll('.like-btn');
            
            
            // 应用所有筛选条件
            function applyFilters() {
                let visibleCount = 0;
                const selectedCategory = document.querySelector('.category-pill.active').dataset.category;
                const maxPrice = parseInt(priceRange.value);
                const minRating = document.querySelectorAll('.rating-star.active').length - 1; // 减1因为包含0星
                const selectedDelivery = Array.from(deliveryCheckboxes)
                    .filter(checkbox => checkbox.checked)
                    .map(checkbox => checkbox.id);
                const selectedFeatures = Array.from(featureCheckboxes)
                    .filter(checkbox => checkbox.checked)
                    .map(checkbox => checkbox.id.replace('feature', '').toLowerCase());
                const searchTerm = globalSearch.value.toLowerCase();
                
                // 检查是否选择了"不限"交付时间
                const anyDelivery = selectedDelivery.includes('deliveryAny');
                
                serviceCards.forEach(card => {
                    // 分类筛选
                    const categoryMatch = selectedCategory === 'all' || card.dataset.category === selectedCategory;
                    
                    // 价格筛选
                    const priceMatch = parseInt(card.dataset.price) <= maxPrice;
                    
                    // 评分筛选
                    const ratingMatch = parseFloat(card.dataset.rating) >= minRating;
                    
                    // 交付时间筛选
                    let deliveryMatch = anyDelivery;
                    if (!anyDelivery) {
                        if (selectedDelivery.includes('delivery24h') && parseInt(card.dataset.delivery) <= 1) {
                            deliveryMatch = true;
                        } else if (selectedDelivery.includes('delivery3days') && parseInt(card.dataset.delivery) <= 3) {
                            deliveryMatch = true;
                        } else if (selectedDelivery.includes('delivery7days') && parseInt(card.dataset.delivery) <= 7) {
                            deliveryMatch = true;
                        } else {
                            deliveryMatch = false;
                        }
                    }
                    
                    // 服务特性筛选
                    let featuresMatch = true;
                    if (selectedFeatures.length > 0) {
                        const cardFeatures = card.dataset.features.split(',');
                        selectedFeatures.forEach(feature => {
                            if (!cardFeatures.includes(feature)) {
                                featuresMatch = false;
                            }
                        });
                    }
                    
                    // 搜索筛选
                    const titleMatch = card.querySelector('.service-title').textContent.toLowerCase().includes(searchTerm);
                    const descriptionMatch = card.querySelector('.service-description').textContent.toLowerCase().includes(searchTerm);
                    const authorMatch = card.querySelector('.author-name').textContent.toLowerCase().includes(searchTerm);
                    const searchMatch = searchTerm === '' || titleMatch || descriptionMatch || authorMatch;
                    
                    // 所有条件都满足才显示
                    const shouldShow = categoryMatch && priceMatch && ratingMatch && deliveryMatch && featuresMatch && searchMatch;
                    
                    card.style.display = shouldShow ? 'block' : 'none';
                    if (shouldShow) visibleCount++;
                });
                
                // 更新结果计数
                resultsCount.textContent = `显示 ${visibleCount} 条服务`;
                
                // 如果没有结果，显示提示
                if (visibleCount === 0) {
                    const noResults = document.createElement('div');
                    noResults.className = 'col-12 text-center py-5';
                    noResults.id = 'noResults';
                    noResults.innerHTML = `
                        <i class="fas fa-search fa-3x text-muted mb-3"></i>
                        <p class="text-muted">没有找到符合条件的服务</p>
                        <button class="btn btn-sm btn-outline-secondary" id="resetFromNoResults">重置筛选条件</button>
                    `;
                    
                    // 确保只添加一次
                    if (!document.getElementById('noResults')) {
                        servicesGrid.appendChild(noResults);
                        document.getElementById('resetFromNoResults').addEventListener('click', resetFilters);
                    }
                } else {
                    // 移除无结果提示
                    const noResults = document.getElementById('noResults');
                    if (noResults) noResults.remove();
                }
            }
            
            // 重置所有筛选条件
            function resetFilters() {
                // 重置分类
                categoryPills.forEach(pill => pill.classList.remove('active'));
                document.querySelector('.category-pill[data-category="all"]').classList.add('active');
                
                // 重置价格范围
                priceRange.value = 5000;
                priceMaxDisplay.textContent = '¥5000+';
                
                // 重置评分
                ratingStars.forEach(star => star.classList.add('active'));
                
                // 重置交付时间（只保留"不限"）
                deliveryCheckboxes.forEach(checkbox => {
                    checkbox.checked = checkbox.id === 'deliveryAny';
                });
                
                // 重置服务特性
                featureCheckboxes.forEach(checkbox => {
                    checkbox.checked = false;
                });
                
                // 重置搜索框
                globalSearch.value = '';
                
                // 重置排序
                sortSelect.value = 'recommended';
                
                // 应用筛选
                applyFilters();
                
                // 显示通知
                showNotification('已重置所有筛选条件');
            }
            
            // 分类筛选点击事件
            categoryPills.forEach(pill => {
                pill.addEventListener('click', function() {
                    categoryPills.forEach(p => p.classList.remove('active'));
                    this.classList.add('active');
                    applyFilters();
                });
            });
            
            // 价格范围筛选事件
            priceRange.addEventListener('input', function() {
                const value = parseInt(this.value);
                priceMaxDisplay.textContent = value === 5000 ? '¥5000+' : `¥${value}`;
                applyFilters();
            });
            
            // 评分筛选事件
            ratingStars.forEach(star => {
                star.addEventListener('click', function() {
                    const rating = parseInt(this.dataset.rating);
                    
                    // 设置星级
                    ratingStars.forEach(s => {
                        const sRating = parseInt(s.dataset.rating);
                        if (sRating <= rating) {
                            s.classList.add('active');
                        } else {
                            s.classList.remove('active');
                        }
                    });
                    
                    applyFilters();
                });
            });
            
            // 交付时间筛选事件
            deliveryCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    // 如果勾选了其他选项，取消"不限"的勾选
                    if (this.id !== 'deliveryAny' && this.checked) {
                        document.getElementById('deliveryAny').checked = false;
                    }
                    
                    // 如果勾选了"不限"，取消其他选项的勾选
                    if (this.id === 'deliveryAny' && this.checked) {
                        deliveryCheckboxes.forEach(cb => {
                            if (cb.id !== 'deliveryAny') cb.checked = false;
                        });
                    }
                    
                    applyFilters();
                });
            });
            
            // 服务特性筛选事件
            featureCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', applyFilters);
            });
            
            // 重置筛选按钮事件
            resetFiltersBtn.addEventListener('click', resetFilters);
            
            // 排序事件
            sortSelect.addEventListener('change', function() {
                const sortBy = this.value;
                const cards = Array.from(serviceCards).filter(card => card.style.display !== 'none');
                
                // 根据选择的排序方式排序
                switch(sortBy) {
                    case 'newest':
                        // 假设最新发布的在前面，这里简单反转顺序作为示例
                        cards.reverse();
                        break;
                    case 'priceLow':
                        cards.sort((a, b) => parseInt(a.dataset.price) - parseInt(b.dataset.price));
                        break;
                    case 'priceHigh':
                        cards.sort((a, b) => parseInt(b.dataset.price) - parseInt(a.dataset.price));
                        break;
                    case 'rating':
                        cards.sort((a, b) => parseFloat(b.dataset.rating) - parseFloat(a.dataset.rating));
                        break;
                    case 'popular':
                        // 按浏览量排序
                        cards.sort((a, b) => {
                            const viewsA = parseInt(a.querySelector('.stat-item:first-child span').textContent.replace('k', '000'));
                            const viewsB = parseInt(b.querySelector('.stat-item:first-child span').textContent.replace('k', '000'));
                            return viewsB - viewsA;
                        });
                        break;
                    default: // recommended
                        // 恢复原始顺序
                        break;
                }
                
                // 重新排列卡片
                cards.forEach(card => {
                    servicesGrid.appendChild(card);
                });
                
                showNotification(`已按${this.options[this.selectedIndex].text}排序`);
            });
            
            // 搜索功能
            searchBtn.addEventListener('click', function() {
                applyFilters();
            });
            
            // 搜索框回车事件
            globalSearch.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    applyFilters();
                }
            });
            
            // 收藏功能
            likeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.style.color = '#ef4444';
                        showNotification('已收藏该服务');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.style.color = '';
                        showNotification('已取消收藏');
                    }
                });
            });
            
            // 加载更多按钮
            loadMoreBtn.addEventListener('click', function() {
                // 模拟加载更多
                this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
                
                setTimeout(() => {
                    // 复制现有卡片作为新内容（实际应用中会从服务器加载）
                    const cardsToAdd = 6;
                    for (let i = 0; i < cardsToAdd; i++) {
                        const randomIndex = Math.floor(Math.random() * serviceCards.length);
                        const clone = serviceCards[randomIndex].cloneNode(true);
                        
                        // 修改克隆卡片的图片和一些数据，使其看起来不同
                        const img = clone.querySelector('.service-image');
                        const originalSrc = img.src;
                        img.src = originalSrc.replace(/random=\d+/, `random=${Math.floor(Math.random() * 100) + 10}`);
                        
                        // 为克隆的按钮添加事件监听
                        clone.querySelector('.like-btn').addEventListener('click', function() {
                            const icon = this.querySelector('i');
                            if (icon.classList.contains('far')) {
                                icon.classList.remove('far');
                                icon.classList.add('fas');
                                this.style.color = '#ef4444';
                                showNotification('已收藏该服务');
                            } else {
                                icon.classList.remove('fas');
                                icon.classList.add('far');
                                this.style.color = '';
                                showNotification('已取消收藏');
                            }
                        });
                        
                        servicesGrid.appendChild(clone);
                    }
                    
                    // 更新服务卡片列表
                    serviceCards.push(...document.querySelectorAll('.service-card:nth-last-child(-n+6)'));
                    
                    // 恢复按钮状态
                    this.innerHTML = '加载更多服务 <i class="fas fa-chevron-down ms-1"></i>';
                    
                    // 重新应用筛选，确保新加载的卡片也会被正确筛选
                    applyFilters();
                    
                    showNotification('已加载更多服务');
                }, 1500);
            });
        });
    </script>
</body>
</html>
    
